<template>
  <span>
    <a-col :md="colMdSm" :xs="colMdSm"
      v-for="{
        key,
        label,
        maxLable = false, // label比较长
        placeholder,
        sizeType = 'default',
        input,
        textarea,
        select,
        selectMode = 'default',
        date,
        showTime = false,
        dates,
        provinceAndCity,
        group,
        format,
        maxLength,
        disabled = false,
        rules = [{ required: false }],
        children,
        advinced = 'no',
        hidden = false, // 为了控制因为某个筛选项变化导致某个某个搜索项显示或者隐藏
      } in searchKeys"
      :key="key"
      v-show="(advinced == 'yes' && advanceVal) || (advinced == 'no')"
    >
      <a-form-item 
        v-if="textarea && !hidden" :label="label" labelAlign="right">
        <a-textarea
          v-decorator="[key, { rules: rules }]"
          :placeholder="placeholder"
          allowClear
        />
      </a-form-item>
      <a-form-item
        :label="label"
        v-if="input && !hidden"
      >
        <a-input
          :size="sizeType"
          :disabled="disabled"
          class="_formItems_input_action"
          :placeholder="placeholder"
          :maxLength="maxLength"
          @blur="e => onBlur(e.target.value, key)"
          @change="e => onInputChange(e, key)"
          v-decorator="[key, { rules }]"
        />
      </a-form-item>
      <a-form-item
        v-if="select && !hidden"
        :label="label"
      >
        <a-select
          showSearch
          :disabled="disabled"
          optionFilterProp="children"
          :filterOption="filterOption"
          :mode="selectMode"
          :size="sizeType"
          :placeholder="placeholder"
          class="_formItems_select_action"
          :class="maxLable && 'max'"
          @change="(value, option) => onSelectChange(option.key, key)"
          v-decorator="[key, { rules: rules }]"
        >
          <a-select-option
            v-for="(it,index) in getDataWithKey(key)"
            :key="index"
            :value="it.key"
          >{{ it.value }}</a-select-option>
        </a-select>
      </a-form-item>
      <a-form-item :label="label" v-if="dates">
        <a-range-picker
          style="width:220px;"
          :size="sizeType"
          show-time
          :format="format"
          @change="onDateChange"
          v-decorator="[key, { rules: rules }]"
        />
      </a-form-item>
      <a-form-item v-if="date" :label="label">
        <a-date-picker
          @change="onDateChange"
          :placeholder="placeholder"
          :format="format"
          :showTime="showTime"
          :disabledDate="disabledDate"
          style="width: 200px;"
          :class="maxLable && 'max'"
          :size="sizeType"
          v-decorator="[key, { rules }]"
        />
      </a-form-item>
      <template v-if="group && !hidden">
        <a-form-item class="_formItems_group" :label="label">
          <a-radio-group v-decorator="[key, { rules }]" @change="e => groupChange(e, key)">
            <a-radio
              v-for="(item, index) in getDataWithKey(key)"
              :key="item.id + index"
              :value="item.id"
            >{{ item.name }}</a-radio>
          </a-radio-group>
        </a-form-item>
      </template>
      <a-form-item v-if="provinceAndCity">
        <a-row type="flex" class="_formItems_province" :gutter="0">
          <span class="_formItems_province_label">{{ label }} <em class="star_sign" v-if="rules && rules[0] && rules[0].required == true" >*</em></span>
          <a-col
            v-for="{
              childKey,
              childLabel,
              childPlaceholder,
              childRules,
              childDisabled = false,
              childSizeType = 'large'
            } in children"
            :key="childKey"
            class="_formItems_province_col"
          >
            <a-form-item :label="childLabel">
              <a-select
                :size="childSizeType"
                :disabled="childDisabled"
                :placeholder="childPlaceholder"
                class="_formItems_province_action"
                @change="(name, option) => onAddressChange(option, childKey)"
                v-decorator="[childKey, { rules: childRules }]"
              >
                <a-select-option
                  v-for="item in getDataWithKey(childKey)"
                  :value="item.name"
                  :key="item.id"
                  >{{ item.name }}</a-select-option
                >
              </a-select>
              <a-input
                :size="childSizeType"
                v-if="childInput"
                :disabled="childDisabled"
                class="_formItems_address_input"
                :placeholder="childPlaceholder"
                @change="
                  (e) => {
                    e.target.value = e.target.value.trim();
                    return e;
                  }
                "
                v-decorator="[childKey, { rules: childRules }]"
              />
            </a-form-item>
          </a-col>
        </a-row>
      </a-form-item>
    </a-col>
  </span>
</template>

<script>
export default {
  name: "FormItems",
  props: {
    visible: {
      type: Boolean,
      default: true,
    },
    colMdSm:{
      type:Object,
      default: () =>{ return {span:7,offset:1}}
    },
    advanceVal:{
      type:Boolean,
      default:true,
    },
    searchKeys: {
      type: Array,
      required: true,
    },
    getDataWithKey: {
      type: Function,
      default: () => {},
    },
    onDateChange: {
      type: Function,
      default: () => {},
    },
    onAddressChange: {
      type: Function,
      default: () => {},
    },
    onExpressChange: {
      type: Function,
      default: () => {},
    },
    disabledDate: {
      type: Function,
      default: () => {},
    },
    isInModal: {
      type: Boolean,
      default: false,
    },
    onBlur: {
      type: Function,
      default: () => {},
    },
    onInputChange: {
      type: Function,
      default: (e) => {
        e.target.value = e.target.value.trim();
        return e;
      },
    },
    onSelectChange: {
      type: Function,
      default: () => {},
    },
    isPlatform: {
      type: Boolean,
      default: false,
    },
    groupChange: {
      type: Function,
      default: () => {},
    },
  },
  methods: {
    filterOption(input, option) {
      return (
        option.componentOptions.children[0].text
          .toLowerCase()
          .indexOf(input.toLowerCase()) >= 0
      );
    },
  },
};
</script>
